<template>
  <el-upload class="avatar-uploader" :action="option.action" :show-file-list="false" :on-success="handleSuccess" :before-upload="option.before">
    <img v-if="model" :src="model" class="avatar" :style="{
                        width : option.width  || '178px', 
                        height: option.herght || '178px' 
                    }" />
    <i v-else class="el-icon-plus avatar-uploader-icon el-upload" :style="{
                    width: option.width   || '178px', 
                    height: option.herght || '178px' 
                }" />
  </el-upload>
</template>
<script>
export default {
  name: "iv-upload",
  props: {
    value: {
      type: String,
      default: ""
    },
    option: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("update:value", val);
      }
    }
  },
  methods: {
    async handleSuccess(res, file, fileList) {
      let url = await this.option.success(res);
      if (url) {
        this.model = url;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  padding-top: 38%;
  text-align: center;
}

.avatar {
  display: block;
  border-radius: 6px;
}
</style>
